<template>
    <div class="line">
        <div v-if="config.isLeftUp.isShow" class="line-leftUpline" :style="{height:config.isLeftUp.height,'top':config.isLeftUp.top}"></div>
        <div v-if="config.isLeftDown.isShow" class="line-leftDownline" :style="{height:config.isLeftDown.height,'top':config.isLeftDown.top}"></div>
        <div v-if="config.isRightUp.isShow" class="line-rightUpline" :style="{height:config.isRightUp.height,'top':config.isRightUp.top}"></div>
        <div v-if="config.isRightDown.isShow" class="line-rightDownline" :style="{height:config.isRightDown.height,'top':config.isRightDown.top}"></div>
    </div>
</template>
<script>
export default {
    name: '',
    props: ['config'],
    data() {
        return {

        };
    },
    components: {},
    computed: {},
    beforeMount() { },
    mounted() { },
    methods: {},
    watch: {}
}
</script>
<style lang="less" scoped>
.line {
    &-leftUpline {
        width: 1px;
        background: #2d8cf0;
        position: absolute;
        left: 377px;
        z-index: 999;
        top: 10px;
    }
    &-leftDownline {
        width: 1px;
        background: #2d8cf0;
        position: absolute;
        left: 377px;
        z-index: 999;
        top: 10px;
    }
    &-rightUpline {
        width: 1px;
        background: #2d8cf0;
        position: absolute;
        right: 402px;
        z-index: 999;
        top: 10px;
    }
    &-rightDownline {
        width: 1px;
        background: #2d8cf0;
        position: absolute;
        right: 402px;
        z-index: 999;
        top: 10px;
    }
}
</style>